<template>
  <div class="cart-wrap">
    <div class="header">
      <h2>购物车</h2>
    </div>
    <div class="item-wrap">
      <div class="item shadow" v-for="(item,index) in cart" :key="index">
        <div class="item-header clearfix">
          <div class="l">
            <van-radio-group v-model="checked">
              <van-radio name="1">
                <van-icon name="shop-o" />
                <span v-if="item.title" class="title">{{ item.name}}</span>
                <van-icon name="arrow" />
              </van-radio>
            </van-radio-group>
          </div>
          <div class="r" >领券</div>
        </div>
          <!-- <div class="item-container-notice clearfix">
            <div class="l">以下商品满88包邮</div>
            <div class="r">
              去凑单
              <van-icon name="arrow" />
            </div>
          </div> -->
        <div class="item-container clearfix" >
          <van-row v-for="(v,k) in item.children" :key="k">
            <van-col span="2">
              <van-radio-group style="padding-top: 25px" v-model="radio">
                <van-radio name="1" />
              </van-radio-group>
            </van-col>
            <van-col span="5">
              <van-image width="70" height="70" :src="item.avatar" />
            </van-col>
            <van-col span="17">
              <div class="item-container-title">
                <p>{{ v.goodsInfo.title }}</p>
              </div>
              <div class="item-container-tool">
                <van-row>
                  <van-col span="18">
                    <p class="money" style="margin: 0">{{ v.goodsInfo.count }}</p>
                    <span class="money" v-if="v.selectedSkuComb">¥ {{ v.selectedSkuComb.price / 100}}</span>
                    <span class="money" v-else>¥ {{ v.goodsInfo.price / 100}}</span>
&nbsp;&nbsp;
                    <span v-if="v.selectedSkuComb">
                      <span v-for="(s,i) in v.selectedSkuComb" :key="i" >
                        <i v-if="i === 'id' || i === 'price' || i === 'stock_num'"></i>
                        <i v-else>{{s}}</i>
                      </span>
                    </span>
                  </van-col>
                  <van-col span="6">
                    <p>
                      <van-stepper v-model="v.number" input-width="20px" button-size="16px" />
                    </p>
                  </van-col>
                </van-row>
              </div>
            </van-col>
          </van-row>
        </div>
      </div>
    </div>
    <!-- end -->
    <div class="item-wrap" v-if="goods == 0" style="background:white;text-align: center;padding-bottom: 0;border-radius: 4px;color: #656565">
      <h1>暂无商品</h1>
    </div>
    
      <van-submit-bar class="submitOrder fixed" :price="price" button-text="提交订单" @clcik="getdata">
        &nbsp;<van-checkbox style="padding-right: 15px;" v-model="checked">全选</van-checkbox>
      </van-submit-bar>
    <c-footer />
  </div>
</template>
<script>
export default {
  name: "cart",
  data() {
    return {
      radio: 1,
      value: 0,
      checked: true,
      goods:[],
      cart:[],
      price: null
    }
  },
  computed:{
     
  },
  watch:{
    
  },
  mounted(){
    let array = this.$store.state.cartData;
    this.goods = array;
    this.formatData(array);
  },
  methods:{
    onSubmit(){
    },
    getdata(){
    },
    formatData(data){
      let store_ids = [];
      let newData = [];
      Object.keys(data).forEach((key)=>{
        if(store_ids.indexOf(data[key].store_id) > -1){
          newData[store_ids.indexOf(data[key].store_id)].children.push(data[key]);
        }else{
          let item = data[key].store;
          item.children = [];
          item.children.push(data[key]);
          store_ids.push(data[key].store_id);
          newData.push(item);
        }

      })
      console.log(newData,2)
      this.cart = newData;
    }
  }
};
</script>
<style scope>
.cart-wrap {
  position: relative;
  padding-bottom: 100px;
}
.cart-wrap .header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 200px;
  width: 100%;
  background: #f63515;
  padding-bottom: 50px;
}
.cart-wrap .header h2 {
  padding: 0 15px;
  color: white;
}

.cart-wrap .item-wrap {
  position: absolute;
  top: 55px;
  width: 96%;
  left: 2%;
  right: 2%;
  padding-bottom: 200px;
}
.item {
  box-sizing: border-box;
  padding: 5px 10px;
  width: 100%;
  background-color: white;
  border-radius: 8px;
  margin-bottom: 10px;
}
.item .title {
  color: #222;
  line-height: 10px;
}

.van-radio__label i {
  line-height: 20px;
}

.item-header {
  padding: 5px 0;
}

.item-container-notice {
  font-size: 12px;
  padding-left: 20px;
  line-height: 33px;
  background: #ffd284;
}
.item-container {
  padding: 5px 0;
}
.item-container-title p {
  margin: 0;
  padding-left: 5px;
}
.item-container-tool {
  padding-left: 5px;
  font-size: 12px;
}
.item-container-tool .money {
  color: #f76262;
}
.submitOrder {
  bottom: 50px!important;
}
</style>